<template>
  <div
    class="modal fade"
    id="loginModal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="login-component">
          <div
            style="float: right; margin: 10px"
            class="close-fill"
            @click="closeLoginModal()"
          >
            <img src="../assets/close-fill@1x.png" />
          </div>
          <div class="login-type">
            <div
              class="password-login"
              :class="choosePasswordLogin"
              @click="switchPasswordLogin"
            >
              密码登录
            </div>
            <div class="splitter"></div>
            <div
              class="email-login"
              :class="chooseEmailLogin"
              @click="switchEmailLogin"
            >
              邮箱登录
            </div>
          </div>
          <div class="login-info" v-show="passwordLogin">
            <div class="account-div">
              <div class="account-span">账号</div>
              <input
                class="account-input form-control"
                v-model="userLoginByPassword.userNo"
                placeholder="请输入账号"
                :class="validateUserNoClass"
                v-on:blur="onLoginUserNoBlur()"
                autocomplete="new-password"
              />
            </div>
            <div class="line"></div>
            <div class="account-div">
              <div class="account-span">密码</div>
              <input
                class="account-input form-control"
                type="password"
                v-model="userLoginByPassword.password"
                placeholder="请输入密码"
                :class="validatePasswordClass"
                v-on:blur="onLoginPasswordBlur()"
                autocomplete="new-password"
              />
            </div>
          </div>

          <div class="login-info" v-show="!passwordLogin">
            <div class="account-div email-div">
              <div class="account-span">邮箱号</div>
              <div class="input-group mb-3 email-input-group">
                <input
                  class="email-input form-control"
                  placeholder="请输入邮箱号"
                  v-model="userLoginByEmail.email"
                />

                <span
                  class="input-group-text get-code"
                  id="basic-addon2"
                  @click="getOptCode()"
                  >获取验证码</span
                >
              </div>
            </div>
            <div class="line"></div>
            <div class="account-div">
              <div class="account-span">验证码</div>
              <input
                class="account-input form-control"
                type="password"
                placeholder="请输入验证码"
                v-model="userLoginByEmail.optCode"
              />
            </div>
          </div>

          <div class="option-div" v-show="passwordLogin">
            <div style="width: 50%">
              <button type="button" class="reg-button" @click="toRegister()">
                注册
              </button>
            </div>
            <div style="width: 50%">
              <button
                type="button"
                class="login-button"
                @click="loginByPassword()"
              >
                登录
              </button>
            </div>
          </div>

          <div class="option-div" v-show="!passwordLogin">
            <div style="width: 92%; margin: auto">
              <div class="reg-alert" v-show="showRegAlert">
                输入邮箱号 注册账号
              </div>
              <button
                type="button"
                class="login-button"
                @click="loginByEmail()"
              >
                登录/注册
              </button>
            </div>
          </div>

          <div class="other-login-type">其它方式登录</div>

          <div class="others">
            <div style="width: 33%" class="wechat-login">
              <img src="../assets/wechat-2-fill@1x.png" />
              <span class="wechat">微信登录</span>
            </div>
            <div style="width: 33%" class="weibo-login">
              <img src="../assets/weibo-fill@1x.png" />
              <span class="wechat">微博登录</span>
            </div>
            <div style="width: 33%" class="qq-login">
              <img src="../assets/qq-fill@1x.png" />
              <span class="wechat">QQ登录</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Qs from "qs";

export default {
  name: "Login",
  data() {
    return {
      passwordLogin: true,
      showRegAlert: false,
      userLoginByPassword: {},
      userLoginByEmail: {},

      // 校验
      loginUserNoValidate: true,
      loginPasswordValidate: true,
    };
  },
  watch: {},
  computed: {
    choosePasswordLogin() {
      return {
        "login-type-chosen": this.passwordLogin,
        "": !this.passwordLogin,
      };
    },
    chooseEmailLogin() {
      return {
        "login-type-chosen": !this.passwordLogin,
        "": this.passwordLogin,
      };
    },
    validateUserNoClass() {
      // todo 校验结果样式
      return {
        "": this.loginUserNoValidate,
        "border-danger": !this.loginUserNoValidate,
      };
    },
    validatePasswordClass() {
      // todo 校验结果样式
      return {
        "": this.loginPasswordValidate,
        "border-danger": !this.loginPasswordValidate,
      };
    },
  },
  mounted() {
    const token = localStorage.getItem("loop_user_token");
    // this.getUserInfoByToken(token);
  },
  methods: {
    getUserInfoByToken(token) {
      if (token) {
        this.$ajax({
          method: "post",
          url: process.env.VUE_APP_SERVER + "/login/get_token",
          data: { token },
        }).then((response) => {
          let resp = response.data;
          const { code, data, message } = resp;
          if (code === 200) {
            this.$parent.setLoginUser(data)
          }
        });
      }
    },
    openLoginModal() {
      $("#loginModal").modal("show");
    },
    switchPasswordLogin() {
      this.passwordLogin = true;
    },
    switchEmailLogin() {
      this.passwordLogin = false;
    },
    closeLoginModal() {
      $("#loginModal").modal("hide");
    },
    toRegister() {
      this.passwordLogin = false;
      this.showRegAlert = true;
      setTimeout(() => {
        this.showRegAlert = false;
      }, 1000);
    },
    loginByPassword() {
      if (
        Tool.isEmpty(this.userLoginByPassword.userNo) ||
        Tool.isEmpty(this.userLoginByPassword.password)
      ) {
        console.log("账号或密码不能为空");
        return;
      }
      this.$ajax
        .post(process.env.VUE_APP_SERVER + "/login", this.userLoginByPassword)
        .then((response) => {
          if (response.data.code === -1 || response.data.data === null) {
            alert("登陆失败请检查")
            return 
          }
          localStorage.setItem("token", response.data.data.token);
          this.getUserInfoByToken(response.data.data.token)
          alert("登录成功")
        });
      // this.$parent.loginUser = localStorage.getItem("user");
      this.closeLoginModal();
      // location.reload()
    },
    onLoginUserNoBlur() {
      this.loginUserNoValidate = Pattern.validateLoginName(
        this.userLoginByPassword.userNo
      );
      return this.loginUserNoValidate;
    },
    onLoginPasswordBlur() {
      this.loginPasswordValidate = Pattern.validatePasswordWeak(
        this.userLoginByPassword.password
      );
      return this.loginPasswordValidate;
    },
    getOptCode() {
      const { email } = this.userLoginByEmail;
      if (!email || email === "") {
        alert("邮箱不能为空");
      }
      console.log(email);
      this.$ajax({
        method: "post",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        transformRequest: [
          function (data) {
            data = Qs.stringify(data);
            return data;
          },
        ],
        url: process.env.VUE_APP_SERVER + "/register/optCode",
        data: {
          email,
        },
      }).then((response) => {
        let resp = response.data;
        console.log(resp);
      });
    },
    loginByEmail() {
      console.log(this.userLoginByEmail);
      this.$ajax({
        method: "post",
        url: process.env.VUE_APP_SERVER + "/login/email",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        transformRequest: [
          function (data) {
            data = Qs.stringify(data);
            return data;
          },
        ],
        data: { ...this.userLoginByEmail },
      }).then((response) => {
        let resp = response.data;
        const { code, data, message } = resp;
        if (code === 0) {
          const { errno, token, errmsg } = data;
          if (errno === 0) {
            this.getUserInfoByToken(token);
            localStorage.setItem("loop_user_token", token);
            this.closeLoginModal();
          } else {
            alert(errmsg);
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.reg-alert-enter-active,.reg-alert-leave-active {
  transition: all 2s;
}
.reg-alert-enter,.reg-alert-leave-to {
  opacity: 0;
}
.reg-alert-enter-to,.v-leave {
  opacity: 0.5;
}

.login-component {
  /* login */
  text-align: center;
  margin-left: -40px;
  width: 560px;
  height: 400px;
  border-radius: 15px;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #f9f2f2;
}
.login-type {
  margin: 50px auto 0 auto;

  width: 80%;
  display: flex;
}
.password-login {
  width: 45%;
  /* 密码登录 */
  height: 45px;
  font-family: pingfang;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 0em;
  color: #9f9f9f;
}
.password-login:hover {
  cursor: pointer;
}
.splitter {
  /* 直线 1 */
  width: 10%;
  height: 0px;
  transform: rotate(90deg);
  border: 0;
}
.email-login {
  /* 邮箱登录 */
  width: 45%;
  height: 45px;
  font-family: pingfang;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 0em;
  color: #9f9f9f;
}
.email-login:hover {
  cursor: pointer;
}
.login-type-chosen {
  color: #90c2f0;
}
.login-info {
  margin: 0 auto;
  width: 63%;
  height: 98px;
  border-radius: 10px;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #dcdcdc;
}
.line {
  margin: auto;
  width: 98%;
  height: 0px;

  border-top: 1px solid #eee;
}
.account-div {
  /*margin-top: 1px;*/
  height: 48%;
  display: flex;
}
.account-input {
  border: 0;
  height: 100%;
  width: 80%;
}
.email-input-group {
  height: 100%;
  width: 80%;
}
.email-input {
  border: 0;
}
.account-span {
  width: 20%;
  line-height: 45px;
  /* 账号 */
  font-family: pingfang;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 0em;
  color: #3d3d3d;
}
.option-div {
  display: flex;
  width: 63%;
  margin: 20px auto;
  /*background-color: #0f5132;*/
}
.login-button {
  /* 矩形 2 */
  width: 144px;
  height: 40px;
  border-radius: 10px;
  background: #a793b9;
  box-sizing: border-box;
  border: 1px solid #dbdbdb;
  font-family: pingfang;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 0em;
  color: #ffffff;
}
.reg-button {
  margin-left: -30px;
  /* 矩形 1 */
  width: 144px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #dbdbdb;
  font-family: pingfang;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 0em;
  color: #3d3d3d;
}
.other-login-type {
  /* 其他方式登录 */
  margin: 10px auto;
  /*width: 112px;*/
  height: 31px;
  font-family: AlibabaPuHuiTiR;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0em;
  color: #acacac;
}
.others {
  width: 63%;
  display: flex;
  margin: 10px auto;
}
.wechat {
  /* 微信登录 */
  width: 85px;
  height: 25px;
  font-family: pingfang;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0em;
  color: #3d3d3d;
}
.close-fill:hover {
  cursor: pointer;
}
.qq-login:hover,
.weibo-login:hover,
.wechat-login:hover,
.close-fill:hover,
.get-code:hover {
  cursor: pointer;
  background-color: rgba(200, 100, 244, 0.1);
  border-radius: 5px;
}
.get-code {
  background-color: rgba(200, 244, 200, 0.2);
  border: 0;

  font-family: pingfang;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0em;
  color: #90c2f0;
}
.reg-alert {
  /* 注册提示 */
  margin: -30px auto 0 auto;
  position: relative;

  width: 173px;
  height: 30px;
  border-radius: 11px;
  background: #908c8c;
  box-sizing: border-box;
  border: 1px solid #f3f3f3;
  font-family: pingfang;
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 0em;
  color: #ffffff;
  line-height: 30px;
}
</style>